<%-- 
    Document   : index
    Created on : Jun 16, 2013, 3:11:56 PM
    Author     : lendle
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="js/require.js"></script>
        <!--script type="text/javascript" src="js/text.js"></script-->
        <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
        <script type="text/javascript" src="js/jquery.json-2.4.js"></script>
        <script>
            var model = null;
            require.config({
                baseUrl: "js/",
                waitSeconds: 15,
                urlArgs: "bust=" + (new Date()).getTime()
            });
        </script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function() {
                require(["mini/MiniContext", "mini/Utils", "mini/weavee/Button", "mini/weavee/DataGrid", 
                    "mini/weavee/datagrid/DataGridModel", "mini/weavee/datagrid/DataGridColumn",
                    "mini/weavee/TextField", "mini/weavee/textfield/TextFieldModel",
                    "mini/weavee/Label", "mini/weavee/label/LabelModel"],
                        function(Mini, Utils, Button, DataGrid, DataGridModel, DataGridColumn, TextField, TextFieldModel, Label, LabelModel) {
                            var button=new Button();
                            $("#button1").get(0).appendChild(button.getUI());
                            var datagrid=new DataGrid();
                            $("#datagrid1").get(0).appendChild(datagrid.getUI());
                            var dataGridModel=new DataGridModel();
                            datagrid.setModel(dataGridModel);
                            dataGridModel.setMiniModelName("model");
                            dataGridModel.addColumnByMap({'name':'Column1', 'label':'Column1', 'bindingText':'key1'});
                            dataGridModel.addColumnByMap({'name':'Column2', 'label':'Column2', 'bindingText':'key2'});
                            dataGridModel.addRow(['', '']);
                            //dataGridModel.addRow(['2', '2']);
                            //dataGridModel.addRow(['3', '3']);
                            datagrid.repaint();
                            
                            var textField=new TextField();
                            var textFieldModel=new TextFieldModel();
                            textFieldModel.setValue("hahaha");
                            textField.setModel(textFieldModel);
                            textFieldModel.setMiniModelName("model");
                            textFieldModel.setBindingValue("key1");
                            $("#textField1").get(0).appendChild(textField.getUI());
                            textField.repaint();
                            
                            var label=new Label();
                            var labelModel=new LabelModel();
                            labelModel.setValue("hahaha");
                            label.setModel(labelModel);
                            labelModel.setMiniModelName("model");
                            labelModel.setBindingValue("key1");
                            $("#label1").get(0).appendChild(label.getUI());
                            label.repaint();
                            
                            //alert(ui.getUI());
                            var m = new Mini();
                            var utils = new Utils();
                            model = utils.create({
                                "paradigm": "normal"
                            });
                            model.data[0] = {
                                'key1': 'value1',
                                'key2': 'value2'
                            };
                            model.data[1] = {
                                'key1': 'value3',
                                'key2': 'value4'
                            };
                            m.load($("#test").get(0));
                            m.load($("#datagrid1").get(0));
                            m.load($("#textField1").get(0));
                            m.load($("#label1").get(0));
                        }
                );
            });
        </script>
        <table id="test" mini:model="model" border="1" style="width:80%">
            <tr mini:object="data">
                <td mini:text="key1"></td>
                <td mini:text="key2"></td>
            </tr>
        </table><br/>
        <div id="button1"></div><br/>
        <div id="datagrid1" style="width: 50%; display:inline-block"></div>111<br/>
        <div id="textField1" style="width: 50%; display:inline-block"></div>111<br/>
        <div id="label1" style="width: 50%; display:inline-block"></div>111<br/>
    </body>
</html>
